<template>
  <div class="reason-box">
    <div class="is-border pie-box">
      <TitleSecondary :title="'大类汇总'" />
      <EchartPie
        v-if="getSeries.length"
        :option="option"
        :series="getSeries"
        :data-list="echartData"
        :name="name"
        :center="center"
        :radius="radius"
        width="1060px"
        height="632px"
        @changeRegion="changeRegion"
      />
      <p-empty v-else style="height: 175px;" />
    </div>
    <div class="table">
      <TitleSecondary title="细类汇总" />
      <MainTableList
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="false"
        :scroll="{ x: '100%', y: '53vh' }"
      />
    </div>
  </div>
</template>

<script>
import EchartPie from './echartPie.vue';
import MainTableList from './mainTableList.vue';

export default {
  components: {
    EchartPie,
    MainTableList,
  },
  props: {
    echartData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          bottom: '10%',
          left: '75%',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          // align: 'auto',
          width: '30%',
          height: '60%',
          padding: 2,
          itemGap: 5
        },
      },
      center: ['40%', '50%'],
      radius: '60%',
      name: '',
      loading: false,
      dataSource: []
    };
  },
  computed: {
    getSeries() {
      return this.echartData?.map((item) => {
        return {
          name: item.loseName,
          value: item.amount
        }
      });
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '细类',
          ellipsis: true,
          dataIndex: 'loseName',
        },
        {
          align: 'center',
          title: '数量',
          dataIndex: 'amount',
          ellipsis: true,
        },
      ];
      return columns;
    },
  },
  watch: {},
  created() {},

  methods: {
    changeRegion(val) {
      let data = this.echartData?.find((item) => {
        return item.loseName === val.name;
      })
      this.dataSource = data.item;
    },
  },
};
</script>

<style lang="less" scoped>
.reason-box {
  display: flex;
  overflow: auto;
  .is-border {
    width: 100%;
    height: 100%;
    padding: 20px 16px;
    border: 1px solid #e5e6e9;
    &.pie-box {
      width: calc(100% - 500px);
      height: 100%;
      overflow: auto;
    }
  }
  .table {
    width: 500px;
    padding: 20px 16px;
    border: 1px solid #e5e6e9;
    margin-left: 20px;
  }
}
</style>
